<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="static/images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="static/images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="Bootstrap-Admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/bootstrap-admin.min.css">
    <!--  dropzone插件必须的css  -->
    <link rel="stylesheet" href="lib/dropzone/dist/dropzone.css">
    <!--  dropzone插件基于boostrap-admin的css美化  -->
    <link rel="stylesheet" href="lib/dropzone/dist/dropzone_bsaex.css">
    <!--  插件css-->
    <link rel="stylesheet" href="lib/select2/dist/css/select2.min.css"/>
    <link rel="stylesheet" href="lib/select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.min.css"/>
    <title>Bootstrap-Admin - 开源免费响应式后台管理系统模板</title>
</head>
<body>

<!--头部导航-->
<ul class="bsa-header">
    <!--   移动端侧边栏toggler(不可删除) -->
    <li>
        <div class="bsa-nav-item bsa-mobile-sidebar-toggler-item">
            <i class="bi bi-list"></i>
        </div>
    </li>
    <!--  搜索框表单部分  -->
    <li>
        <div class="bsa-nav-item bsa-cursor-default bsa-search-form-item">
            <form class="bsa-search-form" action="#">
                <input type="text" class="form-control bsa-search-form-control" name="keyword" aria-label="搜索关键词"
                       placeholder="搜索关键词">
                <button class="bsa-search-submit-btn" type="submit"><i class="bi bi-search"></i></button>
                <button class="bsa-search-close-icon" type="button"><i class="bi bi-x-lg"></i></button>
            </form>
        </div>
    </li>
    <!--  空白占位符(可以让.bsa-header-item左右分布)   -->
    <li class="bsa-spacer"></li>
    <!--  移动端显示的搜索按钮(和搜索框是配套使用)      -->
    <li>
        <div class="bsa-nav-item bsa-mobile-search-toggler-item">
            <i class="bi bi-search"></i>
        </div>
    </li>
    <!--   拓展应用(建议把拓展的连接放在这里,以免破坏头部的整体布局)  -->
    <li class="dropdown">
        <div class="bsa-nav-item" data-bs-toggle="dropdown" data-bs-auto-close="outside">
            <i class="bi bi-grid"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-end p-0">
            <div class="card border-0">
                <div class="card-header bg-white d-flex align-items-center justify-content-between">
                    <span class="bsa-font-15">应用列表</span>
                    <a href="javascript:" class="text-muted bsa-font-13 text-decoration-none">编辑</a>
                </div>
                <div class="card-body p-0">
                    <div class="container-fluid">
                        <div class="row row-cols-3 g-3 p-3">
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用1</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用2</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用3</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用4</div>
                            </a>
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用5</div>
                            </a>
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用6</div>
                            </a>
                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用7</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用8</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用9</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用10</div>
                            </a>

                            <a class="col text-decoration-none d-flex flex-column align-items-center p-2 gap-1 bsa-hover"
                               href="javascript:">
                                <div class="d-flex align-items-center justify-content-center bsa-font-25 bg-info text-white bsa-height-45 bsa-width-45 rounded-3">
                                    <i class="bi bi-link"></i>
                                </div>
                                <div class="bsa-font-14 text-muted bsa-ellipsis2">拓展应用11</div>
                            </a>

                        </div>
                    </div>
                </div>
                <div class="card-footer text-center bg-white">
                    <a href="javascript:" class="text-muted bsa-font-14 text-decoration-none">查看更多应用</a>
                </div>
            </div>
        </div>
    </li>
    <!--    通知    -->
    <li class="dropdown">
        <div class="bsa-nav-item" data-bs-toggle="dropdown">
            <div class="bsa-header-badge-wrapper">
                <span class="bsa-header-badge">99+</span>
                <i class="bi bi-bell"></i>
            </div>
        </div>
        <div class="dropdown-menu dropdown-menu-end p-0">
            <div class="card border-0">
                <div class="card-header bg-white d-flex align-items-center justify-content-between">
                    <span class="bsa-font-15">通知列表</span>
                    <a href="javascript:" class="text-muted bsa-font-13 text-decoration-none">全部设为已读</a>
                </div>
                <div class="card-body p-0">
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color1 text-white">
                            <i class="bi bi-cart"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">新订单</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                您收到新的订单
                            </div>
                            <div class="small text-muted">10秒前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color2 text-white">
                            <i class="bi bi-people"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">新增用户</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                100个新用户注册
                            </div>
                            <div class="small text-muted">30分钟前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color3 text-white">
                            <i class="bi bi-chat-square-dots"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">新的评论</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                您收到客户新的评论
                            </div>
                            <div class="small text-muted">2天前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color4 text-white">
                            <i class="bi bi-cart-check"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">订单已经发货</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                您的商品已在运送途中
                            </div>
                            <div class="small text-muted">3天前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <div class="d-flex align-items-center justify-content-center bsa-font-20 bsa-height-45 bsa-width-45 rounded-circle bsa-bg-color4 text-white">
                            <i class="bi bi-person-workspace"></i>
                        </div>
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">新的同事</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                新增3位后台管理工作成员
                            </div>
                            <div class="small text-muted">1周前</div>
                        </div>
                    </a>
                </div>
                <div class="card-footer text-center bg-white">
                    <a href="javascript:" class="text-muted bsa-font-14 text-decoration-none">查看所有通知</a>
                </div>
            </div>
        </div>
    </li>
    <!--    消息    -->
    <li class="dropdown">
        <div class="bsa-nav-item" data-bs-toggle="dropdown">
            <div class="bsa-header-badge-wrapper">
                <span class="bsa-header-badge">9</span>
                <i class="bi bi-chat-left"></i>
            </div>
        </div>
        <div class="dropdown-menu dropdown-menu-end p-0">
            <div class="card border-0">
                <div class="card-header bg-white d-flex align-items-center justify-content-between">
                    <span class="bsa-font-15">消息列表</span>
                    <a href="javascript:" class="text-muted bsa-font-13 text-decoration-none">全部设为已读</a>
                </div>
                <div class="card-body p-0">
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <img src="https://temp.im/120x120" class="bsa-height-45 bsa-width-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">Jack</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                I'm fine
                            </div>
                            <div class="small text-muted">6分钟前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <img src="https://temp.im/120x120" class="bsa-height-45 bsa-width-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">Rose</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                            </div>
                            <div class="small text-muted">3小时前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <img src="https://temp.im/120x120" class="bsa-height-45 bsa-width-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">Ben</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                Lorem ipsum dolor sit amet, consectetur.
                            </div>
                            <div class="small text-muted">1天前</div>
                        </div>
                    </a>
                    <a href="javascript:" class="d-flex align-items-center text-decoration-none py-2 px-3 bsa-hover">
                        <img src="https://temp.im/120x120" class="bsa-height-45 bsa-width-45 rounded-circle" alt="头像">
                        <div class="d-flex flex-column gap-1 ms-3">
                            <h5 class="text-dark mb-0 bsa-ellipsis">Emily</h5>
                            <div class="text-secondary bsa-ellipsis2">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium
                                architecto autem corporis, eos illo illum itaque nemo nisi, optio sint vitae?
                                Accusantium dolor eius enim iste laudantium perferendis porro!
                            </div>
                            <div class="small text-muted">3天前</div>
                        </div>
                    </a>
                </div>
                <div class="card-footer text-center bg-white">
                    <a href="javascript:" class="text-muted bsa-font-14 text-decoration-none">查看所有消息</a>
                </div>
            </div>
        </div>
    </li>
    <!--    用户信息    -->
    <li class="dropdown">
        <div class="bsa-nav-item" data-bs-toggle="dropdown">
            <div class="d-flex align-items-center mb-2">
                <img src="https://temp.im/120x120" class="bsa-height-40 bsa-width-40 rounded-circle" alt="用户头像">
                <div class="flex-shrink-0 ms-2 bsa-max-width-150 bsa-user-details">
                    <div class="bsa-font-15 bsa-ellipsis">欲饮琵琶码上催</div>
                    <div class="bsa-font-13 bsa-ellipsis">超级管理员</div>
                </div>
            </div>
        </div>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-person me-2"></i>个人资料</a></li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-gear me-2"></i>设置</a></li>
            <li>
                <div class="dropdown-divider"></div>
            </li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-box-arrow-right me-2"></i>退出登录</a>
            </li>
        </ul>
    </li>
</ul>
<!--侧边栏-->
<div class="bsa-sidebar">
    <div class="bsa-sidebar-header">
        <img src="static/images/logo-icon.png" class="bsa-logo-icon" alt="logo-icon">
        <div class="bsa-logo-text">Bootstrap-Admin</div>
    </div>
    <div class="bsa-sidebar-body">
        <ul class="bsa-menu">
            <li>
                <a href="index.html">
                    <i class="bi bi-house"></i>首页
                </a>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-columns-gap"></i>UI组件
                </a>
                <ul>
                    <li>
                        <a href="javascript:" class="has-children">表单</a>
                        <ul>
                            <li><a href="component-form-elements.html">基础元素</a></li>
                            <li><a href="component-form-validations.html">表单验证</a></li>
                            <li><a href="component-form-layouts.html">表单布局</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">栏</a>
                        <ul>
                            <li><a href="component-navs.html">导航</a></li>
                            <li><a href="component-navbar.html">导航栏</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="component-tabs.html">选项卡</a>
                    </li>
                    <li>
                        <a href="component-card.html">卡片</a>
                    </li>
                    <li>
                        <a href="component-button.html">按钮</a>
                    </li>
                    <li>
                        <a href="component-accordion.html">手风琴</a>
                    </li>
                    <li>
                        <a href="component-alert.html">警告框</a>
                    </li>
                    <li>
                        <a href="component-badge.html">徽章</a>
                    </li>
                    <li>
                        <a href="component-breadcrumb.html">面包屑</a>
                    </li>
                    <li>
                        <a href="component-table.html">表格</a>
                    </li>
                    <li>
                        <a href="component-carousel.html">幻灯片</a>
                    </li>
                    <li>
                        <a href="component-collapse.html">折叠</a>
                    </li>
                    <li>
                        <a href="component-dropdowns.html">下拉菜单</a>
                    </li>
                    <li>
                        <a href="component-list-group.html">列表组</a>
                    </li>
                    <li>
                        <a href="component-modal.html">模态框</a>
                    </li>
                    <li>
                        <a href="component-offcanvas.html">抽屉</a>
                    </li>
                    <li>
                        <a href="component-pagination.html">分页</a>
                    </li>
                    <li>
                        <a href="component-placeholders.html">骨架屏</a>
                    </li>
                    <li>
                        <a href="component-popovers.html">气泡</a>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">进度</a>
                        <ul>
                            <li><a href="component-progress.html">进度条</a></li>
                            <li><a href="component-spinners.html">进度环</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="component-scrollspy.html">滚动监听</a>
                    </li>
                    <li>
                        <a href="component-toasts.html">吐司</a>
                    </li>
                    <li>
                        <a href="component-tooltips.html">提示</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children active open">
                    <i class="bi bi-filetype-html"></i>页面
                </a>
                <ul>
                    <li>
                        <a href="page-blank.html">新页面</a>
                    </li>
                    <li>
                        <a href="page-list.html">列表页面</a>
                    </li>
                    <li>
                        <a href="page-add.html">表单新增</a>
                    </li>
                    <li>
                        <a href="page-add2.html" class="active">表单新增2</a>
                    </li>
                    <li>
                        <a href="page-login.html">登录页面</a>
                    </li>
                    <li>
                        <a href="page-login2.html">登录页面2</a>
                    </li>
                    <li>
                        <a href="page-comment.html">评论页</a>
                    </li>
                    <li>
                        <a href="page-pricing.html">产品定价</a>
                    </li>
                    <li>
                        <a href="page-lock-screen.html">锁屏页</a>
                    </li>
                    <li>
                        <a href="page-article-list.html">文章列表页</a>
                    </li>
                    <li>
                        <a href="page-products-details.html">商品详情页</a>
                    </li>
                    <li>
                        <a href="page-profile.html">个人资料</a>
                    </li>
                    <li>
                        <a href="page-timeline.html">时间轴</a>
                    </li>
                    <li>
                        <a href="page-error.html">400/500页面</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-js"></i>插件
                </a>
                <ul>
                    <li><a href="plugin-fullcalendar.html">日历</a></li>
                    <li>
                        <a href="javascript:" class="has-children">图表</a>
                        <ul>
                            <li><a href="plugin-chart.html">chart.js</a></li>
                            <li><a href="plugin-echarts.html">echart.js</a></li>
                        </ul>
                    </li>
                    <li><a href="plugin-bootstrap-notify.html">通知插件</a></li>
                    <li><a href="plugin-bootstrap-dialog.html">弹层插件</a></li>
                    <li><a href="plugin-formvalidation.html">表单验证</a></li>
                    <li><a href="plugin-tempus-dominus.html">日期时间选择</a></li>
                    <li><a href="plugin-tinymce.html">富文本编辑器</a></li>
                    <li><a href="plugin-dropzone.html">文件上传</a></li>
                    <li><a href="plugin-croppie.html">头像裁剪</a></li>
                    <li><a href="plugin-ztree.html">树形组件</a></li>
                    <li><a href="plugin-select2.html">select2</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-list-nested"></i>多级菜单
                </a>
                <ul>
                    <li><a href="javascript:">一级菜单</a></li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="javascript:">二级菜单</a></li>
                            <li>
                                <a href="javascript:" class="has-children">二级菜单</a>
                                <ul>
                                    <li><a href="javascript:">三级菜单</a></li>
                                    <li>
                                        <a href="javascript:" class="has-children">三级菜单</a>
                                        <ul>
                                            <li><a href="javascript:">四级菜单</a></li>
                                            <li><a href="javascript:">四级菜单</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="javascript:">二级菜单</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!--内容区域-->
<div class="bsa-main-wrapper">
    <div class="bsa-main-content">
        <!-- 内容都应该被包裹在此-->
        <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
                <h5 class="card-title">这是一个表单新增的综合演示(包含文件上传、富文本编辑器、select2、前端表单验证插件)</h5>
                <h6 class="card-subtitle mb-2 text-muted">
                    这是我曾经学习黑马租房网时遇到的一个表单(下面的一些ajax请求为jsonplaceholder提供的示例数据)</h6>
                <hr>
                <form action="#" id="form" method="post">
                    <div class="mb-3">
                        <label for="fang_name" class="form-label">房源名称</label>
                        <input type="text" class="form-control" id="fang_name" name="fang_name">
                    </div>
                    <div class="mb-3">
                        <label for="fang_xiaoqu" class="form-label">小区名称</label>
                        <input type="text" class="form-control" id="fang_xiaoqu" name="fang_xiaoqu">
                    </div>

                    <div class="mb-3">
                        <label for="fang_province" class="form-label">小区地址</label>
                        <div>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="visually-hidden" for="fang_province">Preference</label>
                                        <select id="fang_province" class="form-select" name="fang_province">
                                            <option value="0">==请选择省==</option>
                                            <option value="1">福建省</option>
                                            <option value="2">贵州省</option>
                                            <option value="3">广西省</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="visually-hidden" for="fang_city">Preference</label>
                                        <select id="fang_city" class="form-select" name="fang_city">
                                            <option value="0">==市==</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="visually-hidden" for="fang_region">Preference</label>
                                        <select id="fang_region" class="form-select" name="fang_region">
                                            <option value="0">==区/县==</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="visually-hidden" for="fang_street">Preference</label>
                                        <select id="fang_street" class="form-select" name="fang_street">
                                            <option value="0">==镇/街==</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <textarea class="form-control" name="fang_addr" rows="3"
                                                  placeholder="请输入详细地址"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="row row-cols-1 row-cols-md-4 row-cols-lg-4 row-cols-xl-4 g-3">
                        <div class="col">
                            <div class="mb-3">
                                <label for="fang_rent_range" class="form-label">租金范围</label>
                                <select id="fang_rent_range" class="form-select" name="fang_rent_range">
                                    <option value="1">500以下</option>
                                    <option value="2">1000-2000</option>
                                    <option value="3">2000以上</option>
                                </select>
                            </div>
                        </div>
                        <div class="col">

                            <div class="mb-3">
                                <label for="fang_rent" class="form-label">租金</label>
                                <div class="input-group">
                                    <span class="input-group-text">￥</span>
                                    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"
                                           id="fang_rent" name="fang_rent">
                                    <span class="input-group-text">元</span>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="mb-3">
                                <label for="fang_rent_class" class="form-label">租赁方式</label>
                                <select id="fang_rent_class" class="form-select" name="fang_rent_class">
                                    <option value="1">整租</option>
                                    <option value="2">合租</option>
                                </select>
                            </div>
                        </div>
                        <div class="col">
                            <div class="mb-3">
                                <label for="fang_rent_type" class="form-label">付款方式</label>
                                <select id="fang_rent_type" class="form-select" name="fang_rent_type">

                                    <option value="1">押一付三</option>
                                    <option value="2">无押金</option>

                                </select>
                            </div>
                        </div>
                        <div class="col">
                            <div class="mb-3">
                                <label for="fang_floor" class="form-label">楼层</label>
                                <input type="text" class="form-control" value="1" id="fang_floor" name="fang_floor"/>
                            </div>
                        </div>
                        <div class="col">
                            <div class="mb-3">
                                <label for="fang_shi" class="form-label">几室</label>
                                <input type="text" class="form-control" id="fang_shi" name="fang_shi" value="1">
                            </div>
                        </div>
                        <div class="col">
                            <div class="mb-3">
                                <label for="fang_ting" class="form-label">几厅</label>
                                <input type="text" class="form-control" id="fang_ting" name="fang_ting" value="1">
                            </div>
                        </div>
                        <div class="col">
                            <div class="mb-3">
                                <label for="fang_wei" class="form-label">几卫</label>
                                <input type="text" class="form-control" id="fang_wei" name="fang_wei" value="1">
                            </div>
                        </div>
                        <div class="col">
                            <div class="mb-3">
                                <label for="fang_year" class="form-label">建筑年代</label>
                                <input type="text" class="form-control" value="2015" id="fang_year" name="fang_year"/>
                            </div>
                        </div>
                        <div class="col">
                            <div class="mb-3">
                                <label for="fang_direction" class="form-label">房屋朝向</label>
                                <select id="fang_direction" class="form-select" name="fang_direction">

                                    <option value="1">坐北朝南</option>
                                    <option value="2">坐东朝西</option>

                                </select>
                            </div>
                        </div>
                        <div class="col">
                            <div class="mb-3">
                                <label for="fang_build_area" class="form-label">建筑面积</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="fang_build_area" name="fang_build_area"
                                           value="120">
                                    <span class="input-group-text">m²</span>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="mb-3">
                                <label for="fang_using_area" class="form-label">使用面积</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="fang_using_area" name="fang_using_area"
                                           value="100">
                                    <span class="input-group-text">m²</span>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="mb-3">
                        <label class="form-label">配套设施</label>
                        <div class="d-flex align-items-center flex-wrap gap-3">

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="fang_config_1"
                                       value="1" name="fang_config[]">
                                <label class="form-check-label" for="fang_config_1">冰箱</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="fang_config_2"
                                       value="2" name="fang_config[]">
                                <label class="form-check-label" for="fang_config_2">电视</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="fang_config_3"
                                       value="3" name="fang_config[]">
                                <label class="form-check-label" for="fang_config_3">洗衣机</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="fang_config_4"
                                       value="4" name="fang_config[]">
                                <label class="form-check-label" for="fang_config_4">热水器</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="fang_config_5"
                                       value="5" name="fang_config[]">
                                <label class="form-check-label" for="fang_config_5">床</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="fang_config_6"
                                       value="6" name="fang_config[]">
                                <label class="form-check-label" for="fang_config_6">宽带</label>
                            </div>

                        </div>
                    </div>


                    <div class="mb-3">
                        <label for="fang_cover" class="form-label">房源封面</label>
                        <div class="dropzone " id="dropzone_fang_cover"></div>
                        <input type="text" class="form-control" id="fang_cover" name="fang_cover"
                               style="position: fixed;top: -100%">
                    </div>

                    <div class="mb-3">
                        <label for="fang_pic" class="form-label">房源图片</label>
                        <div class="dropzone" id="dropzone_fang_pic"></div>
                        <input type="text" class="form-control" id="fang_pic" name="fang_pic"
                               style="position: fixed;top: -100%">
                    </div>

                    <div class="mb-3">
                        <label for="fang_owner" class="form-label">房东</label>
                        <select class="form-control" id="fang_owner" name="fang_owner"></select>
                    </div>

                    <div class="mb-3">
                        <label for="is_recommend_1" class="form-label">是否推荐</label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="is_recommend" id="is_recommend_1"
                                       value="0"
                                       checked>
                                <label class="form-check-label" for="is_recommend_1">不推荐</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="is_recommend" id="is_recommend_2"
                                       value="1">
                                <label class="form-check-label" for="is_recommend_2">推荐</label>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="fang_desc" class="form-label">房屋描述</label>
                        <textarea class="form-control" rows="3" id="fang_desc" name="fang_desc"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="fang_content" class="form-label">房源详情</label>
                        <textarea id="fang_content" name="fang_content"></textarea>
                        <textarea id="fang_content_temp" name="fang_content_temp"
                                  style="position: fixed;top:-100%" aria-label="房屋详情隐藏域"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">添加</button>
                </form>
            </div>
        </div>
    </div>
</div>
<!--调色板-->
<div class="bsa-switcher">
    <div class="bsa-switcher-toggler-btn">
        <div class="bsa-switcher-toggler-icon">
            <i class="bi bi-gear"></i>
        </div>
    </div>
    <div class="bsa-switcher-header">
        <h5 class="bsa-switcher-header-title">自定义主题</h5>
        <button type="button" class="btn-close text-reset bsa-switcher-toggler-btn"></button>
    </div>
    <div class="bsa-switcher-body">
        <div class="row row-cols-1 g-4">
            <div class="col">
                <h6>头部颜色</h6>
                <hr>
                <div class="bsa-headercolor-wrap">
                    <div class="row row-cols-auto g-3">
                        <div class="col">
                            <div class="headercolor0"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor1"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor2"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor3"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor4"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor5"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor6"></div>
                        </div>
                        <div class="col">
                            <div class="headercolor7"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <h6>侧边栏颜色</h6>
                <hr>
                <div class="bsa-sidebarcolor-wrap">
                    <div class="row row-cols-auto g-3">
                        <div class="col">
                            <div class="sidebarcolor0"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor1"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor2"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor3"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor4"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor5"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor6"></div>
                        </div>
                        <div class="col">
                            <div class="sidebarcolor7"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/dropzone/dist/dropzone2-min.js"></script>
<script src="lib/tinymce/tinymce.min.js"></script>
<script src="lib/select2/dist/js/select2.min.js"></script>
<script src="lib/select2/dist/js/i18n/zh-CN.js"></script>
<script src="lib/formvalidation/js/formValidation.js"></script>
<script src="lib/formvalidation/js/framework/bootstrap.js"></script>
<script src="lib/formvalidation/js/language/zh_CN.js"></script>
<script src="static/js/bootstrap.bundle.min.js"></script>
<script src="static/js/bootstrap-admin.min.js"></script>
<script>

    //前端表单验证
    $('#form').formValidation({
        trigger: "input change",
        fields: {
            fang_name: {
                validators: {
                    notEmpty: true,
                    stringLength: {
                        max: 100,
                    }
                }
            },
            fang_xiaoqu: {
                validators: {
                    notEmpty: true,
                    stringLength: {
                        max: 100,
                    }
                }
            },
            fang_province: {
                validators: {
                    notEmpty: true,
                    callback: {
                        message: '请选择',
                        callback: function (value, validator, $field) {
                            return value > 0;
                        }
                    }
                }
            },

            fang_city: {
                validators: {
                    integer: true,
                    greaterThan: {
                        value: 0
                    },
                }
            },

            fang_region: {
                validators: {
                    integer: true,
                    greaterThan: {
                        value: 0
                    },
                }
            },

            fang_street: {
                validators: {
                    integer: true,
                    greaterThan: {
                        value: 0
                    },
                }
            },

            fang_addr: {
                validators: {
                    notEmpty: true,
                    stringLength: {
                        max: 200,
                    }
                }
            },

            fang_direction: {
                validators: {
                    notEmpty: true,
                    integer: true,
                    greaterThan: {
                        value: 0
                    },
                }
            },
            fang_build_area: {
                validators: {
                    notEmpty: true,
                    integer: true,
                    greaterThan: {
                        value: 0
                    },
                }
            },
            fang_using_area: {
                validators: {
                    notEmpty: true,
                    integer: true,
                    greaterThan: {
                        value: 0
                    },
                }
            },

            fang_year: {
                validators: {
                    notEmpty: true,
                }
            },

            fang_rent: {
                validators: {
                    notEmpty: true,
                    integer: true,
                    greaterThan: {
                        value: 0
                    },
                }
            },

            fang_floor: {
                validators: {
                    notEmpty: true,
                    integer: true,
                    greaterThan: {
                        value: 0
                    },
                }
            },


            fang_shi: {
                validators: {
                    notEmpty: true,
                    integer: true,
                    greaterThan: {
                        value: 0
                    },
                }
            },
            fang_ting: {
                validators: {
                    notEmpty: true,
                    integer: true,
                    greaterThan: {
                        value: 0
                    },
                }
            },
            fang_wei: {
                validators: {
                    notEmpty: true,
                    integer: true,
                    greaterThan: {
                        value: 0
                    },
                }
            },

            fang_rent_class: {
                validators: {
                    notEmpty: true,
                    integer: true,
                    greaterThan: {
                        value: 0
                    },
                }
            },

            fang_area: {
                validators: {
                    notEmpty: true,
                    integer: true,
                    greaterThan: {
                        value: 0
                    },
                }
            },

            fang_rent_range: {
                validators: {
                    notEmpty: true,
                    integer: true,
                    greaterThan: {
                        value: 0
                    },
                }
            },
            fang_rent_type: {
                validators: {
                    notEmpty: true,
                    integer: true,
                    greaterThan: {
                        value: 0
                    },
                }
            },

            fang_status: {
                validators: {
                    notEmpty: true,
                }
            },

            fang_owner: {
                validators: {
                    notEmpty: true,
                    integer: true,
                    greaterThan: {
                        value: 0
                    },
                }
            },


            fang_desc: {
                validators: {
                    notEmpty: true,
                    stringLength: {
                        max: 200,
                    }
                }
            },

            fang_content_temp: {
                validators: {
                    notEmpty: true,
                }
            },

            fang_group: {
                validators: {
                    notEmpty: true,
                    integer: true,
                    greaterThan: {
                        value: 0
                    },
                }
            },



            is_recommend: {
                validators: {
                    notEmpty: true,
                }
            },

            fang_cover: {
                validators: {
                    notEmpty: {
                        message: '请上传图片'
                    },
                }
            },


        }
    }).on('success.form.fv', function (e) {
        //阻止表单提交
        e.preventDefault();
        //得到表单对象
        var $form = $(e.target);
        var bv = $form.data('formValidation');
        //解决tinymce第一次提交没有值的情况
        tinyMCE.triggerSave();
        let data = $form.serialize();
        $.ajax({
            url: "<{url('fang.save')}>",
            method: 'post',
            data: data,
        }).then(function (res) {
            //让按钮可以继续提交
            bv.disableSubmitButtons(false);
            if (res.code === 200) {
                Swal.fire({
                    icon: "success",
                    title: 'ok',
                    timer: 1500,
                    timerProgressBar: true,
                    didOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                    }
                }).then((result) => {
                    //确定 取消 背景都会触发
                    if (result.isConfirmed || result.dismiss === Swal.DismissReason.timer || result.dismiss === Swal.DismissReason.backdrop) {
                        //跳转页面
                        location.replace(res.data.redirect)
                    }
                });
            } else {
                Toast_error(res.msg);
            }
        });
    });



    let dropzone_fang_cover = new Dropzone("#dropzone_fang_cover", {
        url: "/article/upfile.php",
        headers: {
            //这里一般的mvc框架都有这个防止csrf攻击的方法用来生成token
            'X-CSRF-TOKEN': 'xxxxxx'
        },
        paramName: "file", // 上传字段名称 默认为file
        maxFiles: 1,// 一次性上传的文件数量上限
        maxFilesize: 5, // 文件大小，单位：MB
        acceptedFiles: ".jpg,.gif,.png,.jpeg", // 上传的类型
        addRemoveLinks: true,
        parallelUploads: 1,// 一次上传的文件数量
        dictDefaultMessage: '拖动文件至此或者点击上传',
        dictMaxFilesExceeded: "最多只能上传3张封面",
        dictResponseError: '文件上传失败!',
        dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg",
        dictFallbackMessage: "浏览器不受支持",
        dictFileTooBig: "最大只能上传2M大小的封面.",
        dictRemoveLinks: "删除",
        dictRemoveFile: "删除",
        dictCancelUpload: "取消",
        init: function () {

            //这一段代码解决最大上传文件数量(不用管)
            this.on("addedfile", function (file) {
                if (this.files.length > this.options.maxFiles) {
                    this.removeFile(file);
                }
            });

            this.on("success", function (file, response) {
                if (response.code === 200) {
                    // 解决表单提交时，图片以#隔开解决
                    let arr = $('#fang_cover').val().split(',').filter(item => item);
                    arr.push(response.data);
                    let str = arr.join(',');

                    //同时把该值存到file对象上,等会儿删除的时候要通过它清空隐藏域的id值
                    file.id = response.data;

                } else {

                    //文件上传失败
                    $(file.previewTemplate).removeClass('dz-processing dz-image-preview dz-success').addClass('dz-error');
                    $(file.previewTemplate).find('.dz-error-message span').text(response.msg);//response.msg是后台返回的上传错误信息
                }
            });

            //文件上传同时也要清空input隐藏域的id值
            this.on("removedfile", function (file) {
                if (file.id !== undefined) {
                    let arr = $('#fang_cover').val().split(',');
                    arr.splice(arr.indexOf(file.id), 1);
                    let str = arr.join(',');
                }
            });
        }
    });
    let dropzone_fang_pic = new Dropzone("#dropzone_fang_pic", {
        url: "/article/upfile.php",
        headers: {
            //这里一般的mvc框架都有这个防止csrf攻击的方法用来生成token
            'X-CSRF-TOKEN': 'xxxxxx'
        },
        paramName: "file", // 上传字段名称 默认为file
        maxFiles: 3,// 一次性上传的文件数量上限
        maxFilesize: 5, // 文件大小，单位：MB
        acceptedFiles: ".jpg,.gif,.png,.jpeg", // 上传的类型
        addRemoveLinks: true,
        parallelUploads: 3,// 一次上传的文件数量
        dictDefaultMessage: '拖动文件至此或者点击上传',
        dictMaxFilesExceeded: "最多只能上传3张封面",
        dictResponseError: '文件上传失败!',
        dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg",
        dictFallbackMessage: "浏览器不受支持",
        dictFileTooBig: "最大只能上传2M大小的封面.",
        dictRemoveLinks: "删除",
        dictRemoveFile: "删除",
        dictCancelUpload: "取消",
        init: function () {

            //这一段代码解决最大上传文件数量(不用管)
            this.on("addedfile", function (file) {
                if (this.files.length > this.options.maxFiles) {
                    this.removeFile(file);
                }
            });

            this.on("success", function (file, response) {
                if (response.code === 200) {
                    // 解决表单提交时，图片以#隔开解决
                    let arr = $('#fang_cover').val().split(',').filter(item => item);
                    arr.push(response.data);
                    let str = arr.join(',');

                    //同时把该值存到file对象上,等会儿删除的时候要通过它清空隐藏域的id值
                    file.id = response.data;

                } else {

                    //文件上传失败
                    $(file.previewTemplate).removeClass('dz-processing dz-image-preview dz-success').addClass('dz-error');
                    $(file.previewTemplate).find('.dz-error-message span').text(response.msg);//response.msg是后台返回的上传错误信息
                }
            });

            //文件上传同时也要清空input隐藏域的id值
            this.on("removedfile", function (file) {
                if (file.id !== undefined) {
                    let arr = $('#fang_cover').val().split(',');
                    arr.splice(arr.indexOf(file.id), 1);
                    let str = arr.join(',');
                }
            });
        }
    });
    tinymce.init({
        language: 'zh-Hans',
        selector: '#fang_content',
        plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons',
        editimage_cors_hosts: ['picsum.photos'],
        menubar: 'file edit view insert format tools table help',
        toolbar: 'undo redo | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | ltr rtl',

        toolbar_sticky: false,
        //当toolbar_sticky设置为true时生效
        toolbar_sticky_offset: 108,
        //如果写了内容页面刷新前询问是否退出
        autosave_ask_before_unload: false,
        autosave_interval: '30s',
        autosave_prefix: '{path}{query}-{id}-',
        autosave_restore_when_empty: false,
        autosave_retention: '2m',
        image_advtab: true,
        branding: false,
        link_list: [
            {title: 'My page 1', value: 'https://www.tiny.cloud'},
            {title: 'My page 2', value: 'http://www.moxiecode.com'}
        ],
        image_list: [
            {title: 'My page 1', value: 'https://www.tiny.cloud'},
            {title: 'My page 2', value: 'http://www.moxiecode.com'}
        ],
        image_class_list: [
            {title: 'None', value: ''},
            {title: 'Some class', value: 'class-name'}
        ],
        importcss_append: true,
        file_picker_callback: (callback, value, meta) => {
            /* Provide file and text for the link dialog */
            if (meta.filetype === 'file') {
                callback('https://www.google.com/logos/google.jpg', {text: 'My text'});
            }

            /* Provide image and alt text for the image dialog */
            if (meta.filetype === 'image') {
                callback('https://www.google.com/logos/google.jpg', {alt: 'My alt text'});
            }

            /* Provide alternative source and posted for the media dialog */
            if (meta.filetype === 'media') {
                callback('movie.mp4', {source2: 'alt.ogg', poster: 'https://www.google.com/logos/google.jpg'});
            }
        },
        templates: [
            {
                title: 'New Table',
                description: 'creates a new table',
                content: '<div class="mceTmpl"><table width="98%%"  border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>'
            },
            {title: 'Starting my story', description: 'A cure for writers block', content: 'Once upon a time...'},
            {
                title: 'New list with dates',
                description: 'New List with dates',
                content: '<div class="mceTmpl"><span class="cdate">cdate</span><br><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>'
            }
        ],
        template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
        template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
        height: 300,
        image_caption: true,
        quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
        noneditable_class: 'mceNonEditable',
        toolbar_mode: 'sliding',
        contextmenu: 'link image table',
        skin: 'oxide', //oxide  oxide-dark
        content_css: 'default', //dark default
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
        setup: (editor) => {
            editor.on('init', (e) => {
                console.log('tinymce-init');
            });
        },
        init_instance_callback: (editor) => {
            editor.on('input paste ExecCommand', (e) => {
                $('#fang_content_temp').val(tinyMCE.activeEditor.getContent()).trigger('input');
            });
        }
    });


    //省市区的四级联动
    function region_request(value, callback) {
        $.ajax({
            url: "http://jsonplaceholder.typicode.com/users?test=" + value,
            method: 'get',
            success: function (res) {
                callback(res);
            }
        });
    }

    $('#fang_province').on('change', function () {
        let value = $(this).val();
        region_request(value, function (data) {

            let html = '<option value="0">==市==</option>';
            data.map(item => {
                html += `<option value="${item.id}">${item.name}</option>`;
            });
            $('#fang_city').html(html);
            $('#fang_region').html('<option value="0">==区/县==</option>');
            $('#fang_street').html('<option value="0">==镇/街==</option>');
        })
    });

    $('#fang_city').on('change', function () {
        let value = $(this).val();
        region_request(value, function (data) {
            let html = '<option value="0">==区/县==</option>';
            data.map(item => {
                html += `<option value="${item.id}">${item.name}</option>`;
            });
            $('#fang_region').html(html);
            $('#fang_street').html('<option value="0">==镇/街==</option>');
        })
    });

    $('#fang_region').on('change', function () {
        let value = $(this).val();
        region_request(value, function (data) {
            let html = '<option value="0">==镇/街==</option>';
            data.map(item => {
                html += `<option value="${item.id}">${item.name}</option>`;
            });
            $('#fang_street').html(html);

        })
    });


    $('#fang_owner').select2({
        //default classic bootstrap-5
        theme: "bootstrap-5",
        //父容器,如果你是在模态框中使用需要指定这个(bootstrap)
        // dropdownParent: $('#publishModal'),
        language: 'zh-CN',
        //弹出的检索框的宽度
        width: '100%',
        //默认提示
        placeholder: '请选择',
        //至少输入几个字符才开始检索
        // minimumInputLength: 1,
        //可否手动删除
        allowClear: true,
        //是否多选
        multiple: false,
        //最多只能选择3个项目
        maximumSelectionLength: 3,
        //通过ajax请求来获取数据
        ajax: {
            //该接口总数据是100条 _limit：规定每页多少条
            url: 'http://jsonplaceholder.typicode.com/posts?_limit=10',
            dataType: 'json',
            delay: 500,// 延迟显示
            data: function (params) {
                return {
                    // 搜索框内输入的内容
                    q: params.term,
                    // 第几页
                    _page: params.page || 1,
                };
            },
            // 返回结果预处理为select2需要的固定格式
            processResults: function (data, params) {
                params.page = params.page || 1;

                //转换成select2所需格式的数据
                let fdata = [];
                data.map((item) => {
                    fdata.push({
                        id: item.id,
                        text: item.title
                    })
                });

                return {
                    // 后台返回的数据集
                    results: fdata,
                    pagination: {
                        more: (params.page * 10) < 100
                    }
                };
            },
            //设置为false的话，那么每次请求都会携带一个随机时间戳格式参数
            cache: true
        },

        // 让template的html显示效果，否则输出代码
        escapeMarkup: function (markup) {
            return markup;
        },
        // 搜索结果样式自定义
        templateResult: function (option) {
            if (option.loading) return option.text;
            return `
                      <div class="py-2">
                        ${option.text}
                   </div>
                `;
        },
        // 点击option后显示在输入框中的文本自定义
        templateSelection: function (option) {
            return option.text;
        }
    });


</script>

</body>
</html>